<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.2.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">


<script id="hexo-configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    hostname: new URL('https://wzc570738205.github.io').hostname,
    root: '/',
    scheme: 'Gemini',
    version: '7.7.0',
    exturl: true,
    sidebar: {"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},
    copycode: {"enable":true,"show_result":true,"style":null},
    back2top: {"enable":true,"sidebar":false,"scrollpercent":false},
    bookmark: {"enable":true,"color":"#222","save":"auto"},
    fancybox: false,
    mediumzoom: false,
    lazyload: false,
    pangu: false,
    comments: {"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},
    algolia: {
      appID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    },
    localsearch: {"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},
    path: 'search.xml',
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}
  };
</script>

  <meta name="description" content="本文会详细的介绍如何使用cordova来打包vue项目，生成app（android）">
<meta property="og:type" content="article">
<meta property="og:title" content="cordova+vue-cli4构建app">
<meta property="og:url" content="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/index.html">
<meta property="og:site_name" content="王志超的博客">
<meta property="og:description" content="本文会详细的介绍如何使用cordova来打包vue项目，生成app（android）">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/cordova_bot.png">
<meta property="og:image" content="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/a.jpeg">
<meta property="og:image" content="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/b.jpeg">
<meta property="og:image" content="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/c.jpeg">
<meta property="og:image" content="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/d.jpeg">
<meta property="og:image" content="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/e.jpeg">
<meta property="og:image" content="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/f.jpeg">
<meta property="og:image" content="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/g.jpeg">
<meta property="og:image" content="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/h.jpeg">
<meta property="og:image" content="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/i.jpeg">
<meta property="og:image" content="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/j.jpeg">
<meta property="og:image" content="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/k.jpeg">
<meta property="og:image" content="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/l.jpeg">
<meta property="og:image" content="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/m.jpeg">
<meta property="og:image" content="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/n.jpeg">
<meta property="og:image" content="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/o.jpeg">
<meta property="og:image" content="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/p.jpeg">
<meta property="article:published_time" content="2017-12-11T14:15:52.000Z">
<meta property="article:modified_time" content="2020-01-20T07:16:25.880Z">
<meta property="article:author" content="王志超">
<meta property="article:tag" content="cordova">
<meta property="article:tag" content="vue">
<meta property="article:tag" content="vue-cli">
<meta property="article:tag" content="vue-cli4">
<meta property="article:tag" content="混合开发">
<meta property="article:tag" content="cordova更换图片">
<meta property="article:tag" content="cordova更换图标">
<meta property="article:tag" content="cordova更换启动页图片">
<meta property="article:tag" content="cordova+vue-cli4构建app">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/cordova_bot.png">

<link rel="canonical" href="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome: false,
    isPost: true
  };
</script>

  <title>cordova+vue-cli4构建app | 王志超的博客</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-meta">

    <div>
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">王志超的博客</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
        <h1 class="site-subtitle" itemprop="description">今天你更博学了吗</h1>
      
  </div>

  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>
</div>


<nav class="site-nav">
  
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-首页">

    <a href="/" rel="section"><i class="fa fa-fw fa-home"></i>首页</a>

  </li>
        <li class="menu-item menu-item-关于">

    <a href="/about/" rel="section"><i class="fa fa-fw fa-user"></i>关于</a>

  </li>
        <li class="menu-item menu-item-标签">

    <a href="/tags/" rel="section"><i class="fa fa-fw fa-tags"></i>标签</a>

  </li>
        <li class="menu-item menu-item-分类">

    <a href="/categories/" rel="section"><i class="fa fa-fw fa-th"></i>分类</a>

  </li>
        <li class="menu-item menu-item-归档">

    <a href="/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>归档</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>

</nav>
  <div class="site-search">
    <div class="popup search-popup">
    <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocorrect="off" autocapitalize="none"
           placeholder="搜索..." spellcheck="false"
           type="text" id="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result"></div>

</div>
<div class="search-pop-overlay"></div>

  </div>
</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>
  <div class="reading-progress-bar"></div>
  <a role="button" class="book-mark-link book-mark-link-fixed"></a>

  <span class="exturl github-corner" data-url="aHR0cHM6Ly9naXRodWIuY29tL3d6YzU3MDczODIwNQ==" title="Follow me on GitHub" aria-label="Follow me on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></span>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content">
            

  <div class="posts-expand">
      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block " lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://wzc570738205.github.io/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/logo.png">
      <meta itemprop="name" content="王志超">
      <meta itemprop="description" content="记录前端的点点滴滴">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="王志超的博客">
    </span>
      <header class="post-header">
        <h2 class="post-title" itemprop="name headline">
          cordova+vue-cli4构建app
        </h2>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>

              <time title="创建时间：2017-12-11 14:15:52" itemprop="dateCreated datePublished" datetime="2017-12-11T14:15:52+00:00">2017-12-11</time>
            </span>
              <span class="post-meta-item">
                <span class="post-meta-item-icon">
                  <i class="fa fa-calendar-check-o"></i>
                </span>
                <span class="post-meta-item-text">更新于</span>
                <time title="修改时间：2020-01-20 07:16:25" itemprop="dateModified" datetime="2020-01-20T07:16:25+00:00">2020-01-20</time>
              </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86/" itemprop="url" rel="index">
                    <span itemprop="name">前端知识</span>
                  </a>
                </span>
            </span>

          
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="fa fa-comment-o"></i>
      </span>
      <span class="post-meta-item-text">Valine：</span>
    
    <a title="valine" href="/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/#comments" itemprop="discussionUrl">
      <span class="post-comments-count valine-comment-count" data-xid="/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/" itemprop="commentCount"></span>
    </a>
  </span>
  
  

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <img src="/2017/12/11/cordova-vue-cli4%E6%9E%84%E5%BB%BAapp/cordova_bot.png" class="" title="This is an example image">

<p>本文会详细的介绍如何使用cordova来打包vue项目，生成app（android）</p>
<a id="more"></a>
<div class="note success no-icon">
            <p>欢迎加入前端交流群：<a href="//shang.qq.com/wpa/qunwpa?idkey=f528775f242a7c39fe8512383febb8990e621bf97354c2fb82f6832097b7c501" target="_blank" rel="noopener">749539640</a> </p>
          </div>

<p>你将学会：</p>
<ul>
<li>基于cordova构建vue项目app</li>
<li>自定义app名字/图标/启动页图片</li>
<li>自动构建脚本</li>
</ul>
<blockquote>
<p>Cordova<span class="exturl" data-url="aHR0cHM6Ly9jb3Jkb3ZhLmF4dWVyLmNvbS9kb2NzL3poLWNuL2xhdGVzdC9ndWlkZS9vdmVydmlldy8=" title="https://cordova.axuer.com/docs/zh-cn/latest/guide/overview/">(中文官网详细介绍)<i class="fa fa-external-link"></i></span>是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发,应用的实现是通过web页面，默认的本地文件名称是index.html<br>大体思路就是把打包好的vue项目放在cordova的Web App中来启动；我们开始吧</p>
</blockquote>
<h3 id="环境准备"><a href="#环境准备" class="headerlink" title="环境准备"></a>环境准备</h3><ul>
<li>Java SDK 8(cordova最高支持到8)<span class="exturl" data-url="aHR0cHM6Ly93d3cub3JhY2xlLmNvbS90ZWNobmV0d29yay9qYXZhL2phdmFzZS9kb3dubG9hZHMvamRrOC1kb3dubG9hZHMtMjEzMzE1MS5odG1s" title="https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html">下载地址<i class="fa fa-external-link"></i></span><ul>
<li><span class="exturl" data-url="aHR0cHM6Ly93d3cucnVub29iLmNvbS9qYXZhL2phdmEtZW52aXJvbm1lbnQtc2V0dXAuaHRtbA==" title="https://www.runoob.com/java/java-environment-setup.html">window环境配置<i class="fa fa-external-link"></i></span></li>
<li><span class="exturl" data-url="aHR0cHM6Ly93d3cucnVub29iLmNvbS93M2Nub3RlL3dpbjctbGludXgtamF2YS1zZXR1cC5odG1s" title="https://www.runoob.com/w3cnote/win7-linux-java-setup.html">linux环境配置<i class="fa fa-external-link"></i></span></li>
<li><span class="exturl" data-url="aHR0cHM6Ly9qYXZhLmNvbS9lbi9kb3dubG9hZC9oZWxwL21hY19pbnN0YWxsLnhtbA==" title="https://java.com/en/download/help/mac_install.xml">mac Os环境配置<i class="fa fa-external-link"></i></span></li>
</ul>
</li>
<li><span class="exturl" data-url="aHR0cHM6Ly9ncmFkbGUub3JnL2luc3RhbGwv" title="https://gradle.org/install/">Gradle<i class="fa fa-external-link"></i></span></li>
<li><span class="exturl" data-url="aHR0cHM6Ly9jb3Jkb3ZhLmF4dWVyLmNvbS8=" title="https://cordova.axuer.com/">Cordova 8.0<i class="fa fa-external-link"></i></span></li>
<li><span class="exturl" data-url="aHR0cDovL25vZGVqcy5jbi8=" title="http://nodejs.cn/">Node<i class="fa fa-external-link"></i></span></li>
<li><span class="exturl" data-url="aHR0cHM6Ly9jbGkudnVlanMub3JnL3poLw==" title="https://cli.vuejs.org/zh/">vue-cli<i class="fa fa-external-link"></i></span></li>
<li><span class="exturl" data-url="aHR0cHM6Ly9jb3Jkb3ZhLmF4dWVyLmNvbS9kb2NzL3poLWNuL2xhdGVzdC9ndWlkZS9wbGF0Zm9ybXMvYW5kcm9pZC9pbmRleC5odG1s" title="https://cordova.axuer.com/docs/zh-cn/latest/guide/platforms/android/index.html">Android Studio /Android SDK<i class="fa fa-external-link"></i></span><ul>
<li><span class="exturl" data-url="aHR0cHM6Ly9kZXZlbG9wZXIuYW5kcm9pZC5jb20vc3R1ZGlvP3BrZz10b29scw==" title="https://developer.android.com/studio?pkg=tools">Android Studio<i class="fa fa-external-link"></i></span></li>
<li><span class="exturl" data-url="aHR0cHM6Ly9kZXZlbG9wZXIuYW5kcm9pZC5jb20vc3R1ZGlvP3BrZz10b29scw==" title="https://developer.android.com/studio?pkg=tools">Android SDK<i class="fa fa-external-link"></i></span></li>
</ul>
</li>
</ul>
<h4 id="懶人下載包-提取码：gws8"><a href="#懶人下載包-提取码：gws8" class="headerlink" title="懶人下載包(提取码：gws8)"></a>懶人下載包(提取码：gws8)</h4><p><span class="exturl" data-url="aHR0cHM6Ly9wYW4uYmFpZHUuY29tL3MvMUZqR3pwSTF3VGdraHozMDlFYVN1TFE=" title="https://pan.baidu.com/s/1FjGzpI1wTgkhz309EaSuLQ">java8+Android Studio+Gradle<i class="fa fa-external-link"></i></span></p>
<h3 id="验证环境"><a href="#验证环境" class="headerlink" title="验证环境"></a>验证环境</h3><img src="a.jpeg" width="70%" >
项目目录
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">cordova</span><br><span class="line">│   cordova-project</span><br><span class="line">│   my-app</span><br></pre></td></tr></table></figure>
这里把cordova项目和vue项目平级存放，也可以嵌套（自行看情况）

<h3 id="新建cordova项目"><a href="#新建cordova项目" class="headerlink" title="新建cordova项目"></a>新建cordova项目</h3><h4 id="新建cordova目录-在cordova文件夹下新建cordova项目"><a href="#新建cordova目录-在cordova文件夹下新建cordova项目" class="headerlink" title="新建cordova目录,在cordova文件夹下新建cordova项目"></a>新建cordova目录,在cordova文件夹下新建cordova项目</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">mkdir cordova</span><br><span class="line">cd cordova</span><br><span class="line">cordova create cordova-project</span><br></pre></td></tr></table></figure>
<h4 id="添加Android平台"><a href="#添加Android平台" class="headerlink" title="添加Android平台"></a>添加Android平台</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cd cordova-project</span><br><span class="line">cordova platform add android --save</span><br></pre></td></tr></table></figure>
<blockquote>
<p>要构建和运行App，你需要安装每个你需要平台的SDK。另外，当你使用浏览器开发你可以添加 browser平台，它不需要任何平台SDK。</p>
</blockquote>
<h4 id="检测你是否满足构建平台的要求"><a href="#检测你是否满足构建平台的要求" class="headerlink" title="检测你是否满足构建平台的要求:"></a>检测你是否满足构建平台的要求:</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova requirements</span><br></pre></td></tr></table></figure>
<img src="b.jpeg" width="100%" >

<h4 id="打包app安装到手机上（前提是手机连上电脑并开启USB调试模式）"><a href="#打包app安装到手机上（前提是手机连上电脑并开启USB调试模式）" class="headerlink" title="打包app安装到手机上（前提是手机连上电脑并开启USB调试模式）"></a>打包app安装到手机上（前提是手机连上电脑并开启USB调试模式）</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova run android</span><br></pre></td></tr></table></figure>
<p>或者只是打包apk</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">cordova build android</span><br></pre></td></tr></table></figure>
<p>apk生成目录：cordova-project/platforms/android/app/build/outputs/apk/debug/app-debug.apk</p>
<p>默认生成的cordova app 图标：<br><img src="c.jpeg"  ></p>
<p>运行界面：<br><img src="d.jpeg" width="50%" ></p>
<p>进行到这里的时候，cordova部分先告一段落，下面开始第二部分</p>
<h3 id="新建vue项目"><a href="#新建vue项目" class="headerlink" title="新建vue项目"></a>新建vue项目</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">cd cordova</span><br><span class="line">vue create my-app</span><br><span class="line">&#x2F;&#x2F;配置里我们选择默认项就行default (babel, eslint)</span><br><span class="line">cd my-app</span><br><span class="line">npm install </span><br><span class="line">npm run serve</span><br></pre></td></tr></table></figure>

<h4 id="浏览器运行vue项目界面："><a href="#浏览器运行vue项目界面：" class="headerlink" title="浏览器运行vue项目界面："></a>浏览器运行vue项目界面：</h4><img src="e.jpeg" width="30%">

<h4 id="打包vue项目"><a href="#打包vue项目" class="headerlink" title="打包vue项目"></a>打包vue项目</h4><p>配置<span class="exturl" data-url="aHR0cHM6Ly9jbGkudnVlanMub3JnL3poL2NvbmZpZy8=" title="https://cli.vuejs.org/zh/config/">vue.config.js<i class="fa fa-external-link"></i></span><br>my-app目录下新建vue.config.js（这里只做路径配置，其他配置项可详情<span class="exturl" data-url="aHR0cHM6Ly9jbGkudnVlanMub3JnL3poL2NvbmZpZy8=" title="https://cli.vuejs.org/zh/config/">vue.config.js<i class="fa fa-external-link"></i></span>）</p>
<blockquote>
<p>默认情况下，cordova create命令生成基于web的应用程序的骨骼，项目的主页是 www/index.html 文件。</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&#39;use strict&#39;</span><br><span class="line"></span><br><span class="line">module.exports &#x3D; &#123;</span><br><span class="line">  publicPath: &#39;.&#x2F;&#39;,</span><br><span class="line">&#x2F;&#x2F;这个值也可以被设置为空字符串 (&#39;&#39;) 或是相对路径 (&#39;.&#x2F;&#39;)，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。</span><br><span class="line">  outputDir: &#39;..&#x2F;cordova-project&#x2F;www&#39;,</span><br><span class="line">&#x2F;&#x2F;将打包目录指向&#x2F;cordova-projec下的www</span><br><span class="line">  productionSourceMap: false,</span><br><span class="line">&#x2F;&#x2F;如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。</span><br><span class="line"></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>配置好之后我们进行打包</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run build</span><br></pre></td></tr></table></figure>
<h4 id="打包apk安装到手机上"><a href="#打包apk安装到手机上" class="headerlink" title="打包apk安装到手机上"></a>打包apk安装到手机上</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cd cordova-project</span><br><span class="line">cordova run android</span><br></pre></td></tr></table></figure>
<p>或者是打包apk</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cd cordova-project </span><br><span class="line">cordova build android</span><br></pre></td></tr></table></figure>
<p>运行至手机界面：<br><img src="f.jpeg" width="30%"></p>
<h3 id="浏览器调试app"><a href="#浏览器调试app" class="headerlink" title="浏览器调试app"></a>浏览器调试app</h3><p>运行<code>cordova run android</code>后，app会装到手机上<br>谷歌浏览器输入：chrome://inspect/#devices<br>看到如下界面：<br><img src="g.jpeg" width="70%"></p>
<p>找到自己的设备（手机中也需要运行app），点击inspect，接下来就可以调试样式了<br><img src="h.jpeg" width="70%"></p>
<h3 id="更换app图标以及app名字以及app启动页"><a href="#更换app图标以及app名字以及app启动页" class="headerlink" title="更换app图标以及app名字以及app启动页"></a>更换app图标以及app名字以及app启动页</h3><p>先随便准备2张图片（图标以及启动页图片）</p>
<h4 id="更改图标："><a href="#更改图标：" class="headerlink" title="更改图标："></a>更改图标：</h4><img src="i.jpeg" >

<p>进入文件夹：<code>cordova/cordova-project/res/icon/android</code><br>将图片进行替换即可（名字/图片格式推荐png）<br><img src="j.jpeg" width="70%"></p>
<p>替换为：<br><img src="k.jpeg" width="70%"></p>
<h4 id="更改启动页图片："><a href="#更改启动页图片：" class="headerlink" title="更改启动页图片："></a>更改启动页图片：</h4><img src="l.jpeg" width="40%">

<p>安装splashscreen插件：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">cd cordova-project</span><br><span class="line">cordova plugin add cordova-plugin-splashscreen</span><br></pre></td></tr></table></figure>
<p>进入文件夹：<code>/cordova/cordova-project/res/screen/android</code><br>将图片进行替换即可,这里只替换了竖屏的（名字/图片格式推荐png）<br><img src="m.jpeg" width="70%"></p>
<p>替换为<br><img src="n.jpeg" width="70%"></p>
<ul>
<li>打开<code>config.xml</code><h4 id="更改名字-name标签内的内容进行更改即可"><a href="#更改名字-name标签内的内容进行更改即可" class="headerlink" title="更改名字(name标签内的内容进行更改即可)"></a>更改名字(name标签内的内容进行更改即可)</h4><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;name&gt;vueApp&lt;&#x2F;name&gt;</span><br></pre></td></tr></table></figure>
<h4 id="更改配置项"><a href="#更改配置项" class="headerlink" title="更改配置项"></a>更改配置项</h4>添加图标以及启动页，在<code>&lt;platform name=&quot;android&quot;&gt; &lt;/platform&gt;</code>添加如下代码</li>
</ul>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&lt;platform name&#x3D;&quot;android&quot;&gt;</span><br><span class="line">     &lt;allow-intent href&#x3D;&quot;market:*&quot; &#x2F;&gt;</span><br><span class="line">     &lt;icon density&#x3D;&quot;ldpi&quot; src&#x3D;&quot;res&#x2F;icon&#x2F;android&#x2F;icon-36-ldpi.jpg&quot; &#x2F;&gt;</span><br><span class="line">     &lt;icon density&#x3D;&quot;mdpi&quot; src&#x3D;&quot;res&#x2F;icon&#x2F;android&#x2F;icon-48-mdpi.jpg&quot; &#x2F;&gt;</span><br><span class="line">     &lt;icon density&#x3D;&quot;hdpi&quot; src&#x3D;&quot;res&#x2F;icon&#x2F;android&#x2F;icon-72-hdpi.jpg&quot; &#x2F;&gt;</span><br><span class="line">     &lt;icon density&#x3D;&quot;xhdpi&quot; src&#x3D;&quot;res&#x2F;icon&#x2F;android&#x2F;icon-96-xhdpi.jpg&quot; &#x2F;&gt;</span><br><span class="line">     &lt;splash density&#x3D;&quot;port-ldpi&quot; src&#x3D;&quot;res&#x2F;screen&#x2F;android&#x2F;screen-ldpi-portrait.png&quot; &#x2F;&gt;</span><br><span class="line">     &lt;splash density&#x3D;&quot;port-mdpi&quot; src&#x3D;&quot;res&#x2F;screen&#x2F;android&#x2F;screen-mdpi-portrait.png&quot; &#x2F;&gt;</span><br><span class="line">     &lt;splash density&#x3D;&quot;port-hdpi&quot; src&#x3D;&quot;res&#x2F;screen&#x2F;android&#x2F;screen-hdpi-portrait.png&quot; &#x2F;&gt;</span><br><span class="line">     &lt;splash density&#x3D;&quot;port-xhdpi&quot; src&#x3D;&quot;res&#x2F;screen&#x2F;android&#x2F;screen-xhdpi-portrait.png&quot; &#x2F;&gt;</span><br><span class="line">     &lt;preference name&#x3D;&quot;ShowSplashScreenSpinner&quot; value&#x3D;&quot;false&quot; &#x2F;&gt;&lt;!-- 启动页面淡入淡出的效果 --&gt;</span><br><span class="line"> &lt;&#x2F;platform&gt;</span><br></pre></td></tr></table></figure>
<ul>
<li>打包查看<br>图标以及名字：<img src="o.jpeg" >

</li>
</ul>
<p>启动页：<br><img src="p.jpeg" width="40%"></p>
<h3 id="自动构建脚本（shell）"><a href="#自动构建脚本（shell）" class="headerlink" title="自动构建脚本（shell）"></a>自动构建脚本（shell）</h3><p>每次打包需要执行如下命令，很麻烦</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">cd cordova&#x2F;my-app</span><br><span class="line">npm install</span><br><span class="line">npm run build</span><br><span class="line">cd ..&#x2F;cordova-project</span><br><span class="line">cordova build android &#x2F;cordova run android</span><br></pre></td></tr></table></figure>
<p>我们可以在cordova目录下新建build.sh文件</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br></pre></td><td class="code"><pre><span class="line">#!&#x2F;usr&#x2F;bin&#x2F;env bash</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">PLATFORM&#x3D;android</span><br><span class="line">#!1(not clean)   0(clean)</span><br><span class="line">TYPE&#x3D;build</span><br><span class="line">#!(-d)debug   build</span><br><span class="line">TYPE&#x3D;$1</span><br><span class="line"></span><br><span class="line"> </span><br><span class="line">function echo_action() &#123;</span><br><span class="line">    INFO_START&#x3D;&#39;\033[1;36m&#39;</span><br><span class="line">    INFO_END&#x3D;&#39;\033[0m&#39;</span><br><span class="line">    echo -e &quot;\xF0\x9F\x90\xB6 $&#123;INFO_START&#125;$1$&#123;INFO_END&#125;&quot;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function echo_info() &#123;</span><br><span class="line">    INFO_START&#x3D;&#39;\033[1;32m&#39;</span><br><span class="line">    INFO_END&#x3D;&#39;\033[0m&#39;</span><br><span class="line">    echo -e &quot;\xF0\x9F\x92\x9A $&#123;INFO_START&#125;$1$&#123;INFO_END&#125;&quot;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function echo_warn() &#123;</span><br><span class="line">    INFO_START&#x3D;&#39;\033[1;33m&#39;</span><br><span class="line">    INFO_END&#x3D;&#39;\033[0m&#39;</span><br><span class="line">    echo -e &quot;\xF0\x9F\x92\x9B $&#123;INFO_START&#125;$1$&#123;INFO_END&#125;&quot;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function echo_err() &#123;</span><br><span class="line">    INFO_START&#x3D;&#39;\033[1;31m&#39;</span><br><span class="line">    INFO_END&#x3D;&#39;\033[0m&#39;</span><br><span class="line">    echo -e &quot;\xF0\x9F\x92\x94 $&#123;INFO_START&#125;$1$&#123;INFO_END&#125;&quot;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">function addAndroidPlatform() &#123;</span><br><span class="line">    echo_action &quot;Start add android platform ...&quot;</span><br><span class="line">     cordova platform add android</span><br><span class="line">    if [ &quot;$?&quot; !&#x3D; &quot;0&quot; ]; then</span><br><span class="line">        return 1</span><br><span class="line">    fi</span><br><span class="line">    return 0</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">function installDependencesCordova() &#123;</span><br><span class="line">    echo_action &quot;Installing Cordova dependences ...&quot;</span><br><span class="line">    npm install</span><br><span class="line">    echo_info &quot; Cordova Dependences installed&quot;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">function installDependences() &#123;</span><br><span class="line">    echo_action &quot;Installing dependences ...&quot;</span><br><span class="line">    echo_action &quot;cd .&#x2F;my-app&quot;</span><br><span class="line">    cd .&#x2F;my-app</span><br><span class="line">    npm install</span><br><span class="line">    echo_info &quot;Dependences installed&quot;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">function buildWebapp() &#123;</span><br><span class="line">    echo_action &quot;Start building my-app...&quot;</span><br><span class="line">    npm run build</span><br><span class="line">    echo_info &quot;Build Command:  npm run build&quot;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function installPlugins() &#123;</span><br><span class="line">    addAndroidPlatform</span><br><span class="line">    echo_info &quot;Install App Updater plugin finished&quot;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function buildApk() &#123;</span><br><span class="line">    echo_action &quot;Start building ...&quot;</span><br><span class="line">    if [ &quot;$&#123;TYPE&#125;&quot; &#x3D;&#x3D; &quot;debug&quot; ]; then</span><br><span class="line">          cordova run android</span><br><span class="line">          echo_info &quot;Build Command:  cordova run android&quot;</span><br><span class="line">    else</span><br><span class="line">        cordova build android</span><br><span class="line">         echo_info &quot;Build Command:  cordova build android&quot;</span><br><span class="line">    fi</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">echo_info &quot;Build for $&#123;PLATFORM&#125;&quot;</span><br><span class="line">if [ &quot;$&#123;TYPE&#125;&quot; &#x3D;&#x3D; &quot;debug&quot; ]; then</span><br><span class="line">        echo_info &quot;Build Command:  cordova run android&quot;</span><br><span class="line">else</span><br><span class="line">        echo_info &quot;Build Command:  cordova build android&quot;</span><br><span class="line">fi</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">installDependences</span><br><span class="line">if [ &quot;$?&quot; &#x3D;&#x3D; &quot;0&quot; ]; then</span><br><span class="line">    echo_info &quot;All dependences have been installed successfully.&quot;</span><br><span class="line">else</span><br><span class="line">    echo_err &quot;Failed to install dependences.&quot;</span><br><span class="line">fi</span><br><span class="line"></span><br><span class="line">buildWebapp</span><br><span class="line">if [ &quot;$?&quot; &#x3D;&#x3D; &quot;0&quot; ]; then</span><br><span class="line">    echo_info &quot;All things done successfully.&quot;</span><br><span class="line">else</span><br><span class="line">    echo_err &quot;Build failed.&quot;</span><br><span class="line">fi</span><br><span class="line"></span><br><span class="line">echo_action &quot;cd ..&#x2F;cordova-project&quot;</span><br><span class="line">cd ..&#x2F;cordova-project</span><br><span class="line"></span><br><span class="line">installPlugins</span><br><span class="line">if [ &quot;$?&quot; &#x3D;&#x3D; &quot;0&quot; ]; then</span><br><span class="line">    echo_info &quot;All plugins have been installed successfully.&quot;</span><br><span class="line">else</span><br><span class="line">    echo_err &quot;Failed to install plugins.&quot;</span><br><span class="line">fi</span><br><span class="line"></span><br><span class="line">installDependencesCordova</span><br><span class="line">if [ &quot;$?&quot; &#x3D;&#x3D; &quot;0&quot; ]; then</span><br><span class="line">    echo_info &quot;All dependences have been installed successfully..&quot;</span><br><span class="line">else</span><br><span class="line">    echo_err &quot;Failed to install dependences.&quot;</span><br><span class="line">fi</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">buildApk</span><br><span class="line">if [ &quot;$?&quot; &#x3D;&#x3D; &quot;0&quot; ]; then</span><br><span class="line">    echo_info &quot;All things done successfully.&quot;</span><br><span class="line">else</span><br><span class="line">    echo_err &quot;Build failed.&quot;</span><br><span class="line">fi</span><br></pre></td></tr></table></figure>
<p>这样我们下次就可以</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">cd cordova</span><br><span class="line">.&#x2F;build.sh build &#x2F;&#x2F;打包apk</span><br><span class="line">.&#x2F;build.sh debug &#x2F;&#x2F;调试至手机</span><br></pre></td></tr></table></figure>

<h3 id="vue中使用cordova-详情vue-cordova"><a href="#vue中使用cordova-详情vue-cordova" class="headerlink" title="vue中使用cordova,详情vue-cordova"></a>vue中使用cordova,详情<span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL2thcnRzaW1zL3Z1ZS1jb3Jkb3Zh" title="https://github.com/kartsims/vue-cordova">vue-cordova<i class="fa fa-external-link"></i></span></h3>
    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/javascript/" rel="tag"># javascript</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2017/11/19/line-lineoverflow/" rel="prev" title="html单行、多行文本溢出隐藏">
      <i class="fa fa-chevron-left"></i> html单行、多行文本溢出隐藏
    </a></div>
      <div class="post-nav-item">
    <a href="/2018/02/10/VSCode%E7%9A%84%E4%BD%BF%E7%94%A8/" rel="next" title="VSCode的使用">
      VSCode的使用 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  

  </div>


          </div>
          
    <div class="comments" id="valine-comments"></div>

<script>
  window.addEventListener('tabs:register', () => {
    let activeClass = CONFIG.comments.activeClass;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#环境准备"><span class="nav-number">1.</span> <span class="nav-text">环境准备</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#懶人下載包-提取码：gws8"><span class="nav-number">1.1.</span> <span class="nav-text">懶人下載包(提取码：gws8)</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#验证环境"><span class="nav-number">2.</span> <span class="nav-text">验证环境</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#新建cordova项目"><span class="nav-number">3.</span> <span class="nav-text">新建cordova项目</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#新建cordova目录-在cordova文件夹下新建cordova项目"><span class="nav-number">3.1.</span> <span class="nav-text">新建cordova目录,在cordova文件夹下新建cordova项目</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#添加Android平台"><span class="nav-number">3.2.</span> <span class="nav-text">添加Android平台</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#检测你是否满足构建平台的要求"><span class="nav-number">3.3.</span> <span class="nav-text">检测你是否满足构建平台的要求:</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#打包app安装到手机上（前提是手机连上电脑并开启USB调试模式）"><span class="nav-number">3.4.</span> <span class="nav-text">打包app安装到手机上（前提是手机连上电脑并开启USB调试模式）</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#新建vue项目"><span class="nav-number">4.</span> <span class="nav-text">新建vue项目</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#浏览器运行vue项目界面："><span class="nav-number">4.1.</span> <span class="nav-text">浏览器运行vue项目界面：</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#打包vue项目"><span class="nav-number">4.2.</span> <span class="nav-text">打包vue项目</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#打包apk安装到手机上"><span class="nav-number">4.3.</span> <span class="nav-text">打包apk安装到手机上</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#浏览器调试app"><span class="nav-number">5.</span> <span class="nav-text">浏览器调试app</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#更换app图标以及app名字以及app启动页"><span class="nav-number">6.</span> <span class="nav-text">更换app图标以及app名字以及app启动页</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#更改图标："><span class="nav-number">6.1.</span> <span class="nav-text">更改图标：</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#更改启动页图片："><span class="nav-number">6.2.</span> <span class="nav-text">更改启动页图片：</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#更改名字-name标签内的内容进行更改即可"><span class="nav-number">6.3.</span> <span class="nav-text">更改名字(name标签内的内容进行更改即可)</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#更改配置项"><span class="nav-number">6.4.</span> <span class="nav-text">更改配置项</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#自动构建脚本（shell）"><span class="nav-number">7.</span> <span class="nav-text">自动构建脚本（shell）</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#vue中使用cordova-详情vue-cordova"><span class="nav-number">8.</span> <span class="nav-text">vue中使用cordova,详情vue-cordova</span></a></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="王志超"
      src="/images/logo.png">
  <p class="site-author-name" itemprop="name">王志超</p>
  <div class="site-description" itemprop="description">记录前端的点点滴滴</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives">
          <span class="site-state-item-count">19</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/categories/">
        <span class="site-state-item-count">3</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
      <div class="site-state-item site-state-tags">
            <a href="/tags/">
        <span class="site-state-item-count">7</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <span class="exturl" data-url="aHR0cHM6Ly9naXRodWIuY29tL3d6YzU3MDczODIwNQ==" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;wzc570738205"><i class="fa fa-fw fa-github"></i>GitHub</span>
      </span>
      <span class="links-of-author-item">
        <span class="exturl" data-url="aHR0cHM6Ly93d3cuY25ibG9ncy5jb20vd2FuZ3poaWNoYW8v" title="博客园 → https:&#x2F;&#x2F;www.cnblogs.com&#x2F;wangzhichao&#x2F;"><i class="fa fa-fw fa-globe"></i>博客园</span>
      </span>
      <span class="links-of-author-item">
        <span class="exturl" data-url="aHR0cDovL21haWwucXEuY29tL2NnaS1iaW4vcW1fc2hhcmU/dD1xbV9tYWlsbWUmZW1haWw9eHJHOHBmLXo5dkgzLTRhM3RfaWxxYXM=" title="E-Mail → http:&#x2F;&#x2F;mail.qq.com&#x2F;cgi-bin&#x2F;qm_share?t&#x3D;qm_mailme&amp;email&#x3D;xrG8pf-z9vH3-4a3t_ilqas"><i class="fa fa-fw fa-envelope"></i>E-Mail</span>
      </span>
      <span class="links-of-author-item">
        <a href="//shang.qq.com/wpa/qunwpa?idkey=f528775f242a7c39fe8512383febb8990e621bf97354c2fb82f6832097b7c501" target="_blank" rel="noopener" title="QQ群 → &#x2F;&#x2F;shang.qq.com&#x2F;wpa&#x2F;qunwpa?idkey&#x3D;f528775f242a7c39fe8512383febb8990e621bf97354c2fb82f6832097b7c501"><i class="fa fa-fw fa-qq"></i>QQ群</a>
      </span>
      <span class="links-of-author-item">
        <span class="exturl" data-url="aHR0cDovL3dhbmd6Yy53YW5nL3dlYnNvY2tldC8=" title="websocket → http:&#x2F;&#x2F;wangzc.wang&#x2F;websocket&#x2F;"><i class="fa fa-fw fa-comments"></i>websocket</span>
      </span>
  </div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

<div class="copyright">
  
  &copy; 2015 – 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">王志超</span>
</div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/pisces.js"></script>


<script src="/js/next-boot.js"></script>

<script src="/js/bookmark.js"></script>




  




  
<script src="/js/local-search.js"></script>









<script>
if (document.querySelectorAll('div.pdf').length) {
  NexT.utils.getScript('//cdn.jsdelivr.net/npm/pdfobject@2/pdfobject.min.js', () => {
    document.querySelectorAll('div.pdf').forEach(element => {
      PDFObject.embed(element.getAttribute('target'), element, {
        pdfOpenParams: {
          navpanes: 0,
          toolbar: 0,
          statusbar: 0,
          pagemode: 'thumbs',
          view: 'FitH'
        },
        PDFJS_URL: '/lib/pdf/web/viewer.html',
        height: element.getAttribute('height') || '700px'
      });
    });
  }, window.PDFObject);
}
</script>




  

  


<script>
NexT.utils.loadComments(document.querySelector('#valine-comments'), () => {
  NexT.utils.getScript('//unpkg.com/valine/dist/Valine.min.js', () => {
    var GUEST = ['nick', 'mail', 'link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item => {
      return GUEST.includes(item);
    });
    new Valine({
      el: '#valine-comments',
      verify: false,
      notify: false,
      appId: '9fgm6JVbw8PrOlvp7LfsKjsh-gzGzoHsz',
      appKey: 'LReLvzSwPnBOAz5LiIgJsiDO',
      placeholder: "说点什么吧",
      avatar: 'mm',
      meta: guest,
      pageSize: '10' || 10,
      visitor: false,
      lang: 'zh-cn' || 'zh-cn',
      path: location.pathname,
      recordIP: false,
      serverURLs: ''
    });
  }, window.Valine);
});
</script>

</body>
</html>
